<template>
  <div>
    <br />
    <div style="margin-left: 10px;">
      <i class="el-icon-paperclip"/>
      <span> 交易记录</span>
    </div>
    <el-card style="width: 98%; margin-left: 10px;">
      <br />
      <el-row>
        <el-col :span="14">
          <el-dropdown @command="handleCommand" placement="bottom">
            <el-button type="primary" size="medium" style="margin-right: 10px;margin-left: 12px;">
              <i class="el-icon-bank-card"></i> 会员卡选择<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="max-height: 210px;overflow: overlay; width: 140px;">
              <el-dropdown-item command="all">所有会员卡</el-dropdown-item>
              <el-dropdown-item v-for="card in cardList" v-text="card.id"
              :command="composeValue(card)"/>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="6">
          <el-input placeholder="请输入要查询的交易单号" prefix-icon="el-icon-search" style="margin-left: 20px;"
          :disabled="dealList.length===0&&query.length===0" v-if="mode==='id'" clearable
          v-model="query" @clear="getDealListByLike" @input="getDealListByLike" ></el-input>
          <el-input placeholder="请输入要查询的交易时间" prefix-icon="el-icon-search" style="margin-left: 20px;"
          :disabled="dealList.length===0&&query.length===0" v-else clearable
          v-model="query" @clear="getDealListByLike" @input="getDealListByLike" ></el-input>
        </el-col>
        <el-col :span="2">
          <el-dropdown @command="selectMode" placement="bottom" style="margin-left: 40px;">
            <el-button type="primary" size="medium" v-if="mode==='id'">
              <i class="el-icon-document"> 查询交易单号</i>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-button type="primary" size="medium" v-else>
              <i class="el-icon-time"> 查询交易时间</i>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="width: 130px;">
              <el-dropdown-item command="id">交易单号</el-dropdown-item>
              <el-dropdown-item command="dealTime">交易时间</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <br />
      <el-table :data="dealList" height="580"
      v-loading="loading"
      :element-loading-text="tips"
      element-loading-spinner="el-icon-error"
      :default-sort = "{prop: 'dealTime', order: 'descending'}"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 98%;margin-left: 15px;">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form :model="scope.row.consume" inline style="margin-left: 450px;">
              <div v-if="scope.row.transaction===1">
                <el-form-item label="充值金额:">
                  <span v-text="scope.row.recharge.price"></span>
                  <span>元</span>
                </el-form-item>
                <el-form-item label="支付方式:">
                  <span v-if="scope.row.recharge.payment===1">电子支付</span>
                  <span v-else>现金支付</span>
                </el-form-item>
                <el-form-item label="支付渠道:" v-if="scope.row.recharge.payment===1">
                  <span v-text="scope.row.recharge.mode"></span>
                </el-form-item>
                <span v-else>
                  <el-form-item label="实际支付:">
                    <span v-text="scope.row.recharge.realMoney"></span>
                    <span>元</span>
                  </el-form-item>
                  <el-form-item label="零钱找回:">
                    <span v-text="scope.row.recharge.returnMoney"></span>
                    <span>元</span>
                  </el-form-item>
                </span>
              </div>
              <div v-else-if="scope.row.transaction===0">
                <el-form-item label="订购电影:">
                  <span v-text="scope.row.consume.movieName"></span>
                </el-form-item>
                <el-form-item label="售出票数:">
                  <span v-text="scope.row.consume.num"></span>
                </el-form-item>
                <el-form-item label="电影价格:">
                  <span>￥</span>
                  <span v-text="scope.row.consume.price"></span>
                </el-form-item>
                <el-form-item label="电影积分:">
                  <span v-text="scope.row.consume.integral"></span>
                </el-form-item>
                <el-form-item label="交易金额:">
                  <span>￥</span>
                  <span v-text="scope.row.consume.price*scope.row.consume.num"></span>
                </el-form-item>
                <el-form-item label="获取积分:">
                  <span v-text="scope.row.consume.integral*scope.row.consume.num"></span>
                </el-form-item>
              </div>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="交易单号" width="260px"></el-table-column>
        <el-table-column prop="userName" label="会员姓名" width="100px"></el-table-column>
        <el-table-column prop="cardId" label="会员卡号" width="280px"></el-table-column>
        <el-table-column prop="transaction" label="交易操作" width="150px"
                        :filter-method="selectTransaction"  filter-placement="bottom"
                        :filters="[{ text: '充值', value: 1 }, { text: '消费', value: 0 }]">
          <template slot-scope="scope">
            <el-tag type="success" style="font-size: 15px;" v-if="scope.row.transaction===1">充值</el-tag>
            <el-tag type="danger" style="font-size: 15px;" v-else>消费</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="moneyChange" label="金额变化" width="220px" sortable>
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.transaction===1" style="color: black;">+</span>
              <span v-else-if="scope.row.transaction===0" style="color: black;">-</span>
              <span v-text="scope.row.moneyChange" style="color: black;"/>&nbsp;
              <i class="el-icon-top" style="color: limegreen;" v-if="scope.row.transaction===1"/>
              <i class="el-icon-bottom" style="color: red;" v-else-if="scope.row.transaction===0"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="integralChange" label="积分变化" width="180px" sortable>
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.integralChange>0" style="color: black;">+</span>
              <span v-text="scope.row.integralChange" style="color: black;"/>&nbsp;
              <i class="el-icon-top" style="color: limegreen;" v-if="scope.row.integralChange>0"/>
              <i class="el-icon-bottom" style="color: red;" v-else-if="scope.row.integralChange<0"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dealTime" label="交易时间" width="280px" sortable></el-table-column>
      </el-table>
      <br />
    </el-card>
  </div>
</template>

<script>
  export default {
    created(){
      this.getCardId()
      this.getDealList()
    },
    data(){
      return{
        mode:'',
        query:'',
        tips:'',
        loading:'',
        cardId:'',
        cardList:[],
        dealList:[]
      }
    },
    methods:{
      async getDealList(){
        this.loading=false
        const {data: result} =await this.$http.get(`deal/getDealList?query=${this.query}&mode=${this.mode}`)
        this.dealList=result.data
        if(this.dealList.length===0&&this.query.length===0){
          this.loading=true
          this.tips='系统不存在任何交易记录'
        }
        else{
          this.loading=false
          this.tips='当前会员卡不存在任何交易记录'
        }
      },
      selectTransaction(value,row){
        return row.transaction === value
      },
      selectMode(command){
        this.mode=command
        if(this.query.length!==0){
          this.getDealList()
        }
      },
      async getCardId(){
        const {data: result} =await this.$http.get('card/getCardId')
        this.cardList=result.data
        for(let card of this.cardList){
          const {data:result} = await this.$http.get(`deal/getDealListByCardId?cardId=${card.id}`)
          if(result.data===null){
            card.flag=true
          }
        }
      },
      getDealListByLike(){
        if(this.cardId===null||this.cardId===''){
          this.getDealList()
        }else{
          this.getDealListByCardId()
        }
      },
      async getDealListByCardId(){
        const {data:result} = await this.$http.get(`deal/getDealListByCardId?cardId=${this.cardId}&query=${this.query}&mode=${this.mode}`)
        this.dealList=result.data
      },
      async handleCommand(command){
        let flag="flag"
        this.query=''
        this.loading=false
        if(command==="all"){
          this.getDealList()
          if(this.dealList.length===0&&this.cardId===null){
            this.$message.error("系统不存在任何交易记录!")
          }else{
            this.$message.success("所有交易记录展示成功!")
          }
          return
        }
        if(command.flag===true){
          this.loading=true
          this.dealList=[]
          return
        }
        this.cardId=command.cardId
        this.getDealListByCardId()
        this.$message.success(this.cardId+"会员卡交易记录展示成功!")
      },
      composeValue(card){
        return {
          'cardId':card.id,
          'flag':card.flag
        }
      }
    }
  }
</script>

<style>

</style>
